<template>
    <div class="trade">
      	<img class="close" src="../assets/img/butuisong@2x.png" @click.stop.self="close(momentType, momentId)"/>
        <a :href="Props.USER_CODE | userDetailFilter">
        	<div class="trade_con">
        		<div class="touxiang">
              <avatar :src="Props.USER_PHOTO" :href="Props.USER_CODE"/>
        			<!-- <img :src="Props.USER_PHOTO || `${require('@/assets/img/touxiangBG@2x.png')}`"/> -->
        		</div>
        		<div class="info">
               <div class="info_name">
                 <span class="v_name">{{Props.NICK_NAME}}</span>
                 <img class="v_logo" src="../assets/img/vip@2x.png" v-if="Props.USER_LEVEL!==null && Props.USER_LEVEL!==''"/>
               </div>
        			 <div class="info_detail">
        			 	 <div class="gp_name">{{Props.STOCK_NAME}}<p class="gp_code">{{Props.STOCK_CODE}}</p></div>
        			 	 <div class="gp_num">{{Props.PRICE | toFix(2)}}<p class="gp_method">买入</p></div>
        			 	 <div class="gp_price">{{Props.VOLUME}}<p class="gp_unit">数量 / 股</p> </div>
        			 </div>
        			 <span class='go_other'>
        			 	 看他的主页 >
        			 </span>
        		</div>
        	</div>
        </a>
        <slot></slot>
    </div>
</template>

<script>
import BottomBar from './common/BottomBar'
import MomentMixin from './MomentMixin'
import { userDetailFilter } from '../filters/userFilter'
import Avatar from './Avatar'

export default {
  name: 'Trade',
  components: {
    BottomBar,
    Avatar
  },
  props: {
    Props: Object
  },
  filters: {
    userDetailFilter,
    toFix (val, length) {
      return Number(val).toFixed(length)
    }
  },
  mixins: [MomentMixin]
}
</script>

<style lang="less" scoped>
@import "./common/mixins.less";

.trade {
  .moment;
  position:relative;
  .label {
    position: absolute;
    left: -2px;
    top: 5px;
    width: 27px;
    height: 118px;
  }
  .close {
  	position:absolute;
  	right: 4px;
  	top: 0px;
  	width: 34px;
  	height: 24px;
  }
}
.trade_con {
	height: 143px;
	width: 100%;
	padding: 23px 10px 0 41px;
	box-sizing: border-box;
	display: flex;
	flex: 1;
	text-align: left;
}
.touxiang {
	width: 58px;
	height: 58px;
	margin-right: 17px;
	img{
		display: block;
		width: 58px;
	    height: 58px;
	}
}

.info_detail {
	@media screen {
      @media (max-width: 400px) {
        font-size: 14px;
      }
      @media (min-width: 400px) {
        font-size: 16px; /*no*/
      }
    }
	width: 227px;
	height: 47px;
	box-sizing: border-box;
	background-color:#F9FAFA ;
	border-radius: 10px;
	padding: 6px;
	margin-bottom: 10px;
	display: flex;
	text-align: center;
	color: #565656;
	border:1px solid #D5DBE0;
}
.gp_name {
	flex-basis: 80px;
	.gp_code {
		@media screen {
      @media (max-width: 400px) {
        font-size: 12px;/*no*/
      }
      @media (min-width: 400px) {
        font-size: 14px;/*no*/
      }
    }
		color: #999999;
	}
}
.gp_num {
	flex-basis: 67px;
	border-left: 1px dotted #D5DBE0;
	border-right: 1px dotted #D5DBE0;
	.gp_method {
		@media screen {
      @media (max-width: 400px) {
        font-size: 12px;/*no*/
      }
      @media (min-width: 400px) {
        font-size: 14px;/*no*/
      }
    }
		color: #FF3333;
	}
}
.gp_price {
	flex-basis: 80px;
	.gp_unit {
		@media screen {
      @media (max-width: 400px) {
        font-size: 12px;/*no*/
      }
      @media (min-width: 400px) {
        font-size: 14px;/*no*/
      }
    }
		color:#999999;
	}
}
.go_other {
	.go_other_font;
}
</style>
